import React, { useState } from 'react';
import { Card, Tabs, Space, Avatar, Image} from 'antd';
import styles from './ProjectDetail.module.scss';
import {
  LikeOutlined,
  ShareAltOutlined,
  UserOutlined,
  AntDesignOutlined,
  LikeFilled,
} from '@ant-design/icons';
import Image1 from '@/assets/Image1.png';
import Image2 from '@/assets/Image2.png';
import teamStyles from './TeamMember.module.scss';

const { TabPane } = Tabs;

const teacher = [1, 2, 3];
const team = ['a', 'b', 'c', 'd', 'e', 'f'];

const renderItem = {
  teacher: {
    title: '鄂海红',
    position: '教授',
    desc: '所在学院： 计算机学院 （国家示范性软件学院）',
    content: '研究方向:知识图谱与大模型协同的数据要素治理和复杂推理决策。',
  },
  team: {
    title: '胡欣扬',
    position: '负责人',
    desc: '所在学院： 计算机学院 （国家示范性软件学院）',
    content: '2021级本科生，软件工程方向，精通前端技术，擅长用HTML/CSS/JS',
  },
};

const ProjectDetail: React.FC = () => {
  const [liked, setLiked] = useState(false);
  const [collected, setCollected] = useState(false);
  const renderCard = (arr: string[] | number[], type: 'teacher' | 'team') => {
    return arr.map((item, index) => {
      return (
        <div className={styles.card} key={index}>
          <div className={styles.cardTop}>
            <Avatar
              size={70}
              src="https://imgs.699pic.com/images/500/997/851.jpg!list1x.v2"
            />
            <div className={styles.show}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span
                  style={{
                    fontWeight: '800',
                    marginRight: '0.7em',
                    fontSize: '1.25rem',
                    marginTop:'-10px'
                  }}
                >
                  {renderItem[type].title}
                </span>
                <span className={styles.topTags}>
                  {renderItem[type].position}
                </span>
              </div>
              <div style={{ color: 'rgba(129,131,143,1)', fontSize: '0.97rem' }}>
                {renderItem[type].desc}
              </div>
            </div>
          </div>
          <div className={styles.cardBottom}> {renderItem[type].content}</div>
        </div>
      );
    });
  };


  return (
    <div className={styles.projectDetailContainer}>
      <nav>
        <div className={styles.navtop}>
          <span className={styles.title}>智诚研盾</span>
          <Space>
          <span  className={styles.topright} onClick={() => setLiked(!liked)} style={{ display: 'inline-flex', alignItems: 'center',  color: '#81838f',fontSize: '1.125rem'}}>
            {liked ? <LikeFilled style={{ color: 'red', fontSize: '1.125rem', marginRight: '0.125rem' }} /> : <LikeOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} />} 赞
          </span>
          <span  className={styles.topright} onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f',fontSize: '1.125rem'}}>
            {collected ? <ShareAltOutlined style={{ color: 'green', fontSize: '1.125rem',marginRight: '0.0625rem' }} /> : <ShareAltOutlined style={{ fontSize: '1.125rem', marginRight: '0.0625rem' }} />} 分享
          </span>
          </Space>
        </div>
        <div style={{ marginBottom: '.4em' }}>
          <Space>
            <span className={styles.tags}>诚信科研</span>
            <span className={styles.tags}>学术不端</span>
            <span className={styles.tags}>智能检测</span>
            <span className={styles.tags}>论文工厂</span>
          </Space>
        </div>
        <div className={styles.bottom}>
          <span style={{ marginRight: '1em' }}>参与人</span>
          <span>
            <Avatar.Group>
              <Avatar src="https://imgs.699pic.com/images/500/997/851.jpg!list1x.v2" />
              <a href="https://ant.design">
                <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
              </a>
              <Avatar
                style={{ backgroundColor: '#87d068' }}
                icon={<UserOutlined />}
              />
              <Avatar
                style={{ backgroundColor: '#1677ff' }}
                icon={<AntDesignOutlined />}
              />
            </Avatar.Group>
          </span>
        </div>
      </nav>
      <Card className={styles.projectCard}>
        <Tabs defaultActiveKey="2" className="custom-new-TabBar" tabBarStyle={{ textAlign: 'center', marginRight: '20px',}}indicator={{ size: (origin) => origin + 20,align: 'center' }}>
          <TabPane tab={<span style={{ paddingLeft: '24px', marginRight:'20px'}}>项目介绍</span>}  key="1" >
            <div>
            <div className={styles.tabs}>
            <div>
              <span className={styles.tabTitle}>项目简介</span>
              <div className={teamStyles.cardWrapper}>
                我们开发了一个综合性学术不端行为检测平台，利用最新人工智能技术，自动识别论文中的图片。公式等元素，集成论文工厂判别、图像重复使用与篡改识别、0CR文
                本图片降重等多项功能。平台自动标注可疑内容并进行可视化展示，显著提升审稿效率与准确性，并能快速生成详尽报告，简化科研监督。旨在为科研人员、机构和期
                刊出版社提供高效、功能强大的工具，维护学术诚信，彰显技术创新与学术探求的承诺。
              </div>
            </div>
            <div style={{ marginTop: '2em' }}>
              <span className={styles.tabTitle}>宣传语</span>
              <div className={teamStyles.cardWrapper}>
                AI护航科研诚信，智能治理学术不端
              </div>
            </div>
            <div style={{ marginTop: '2em' }}>
              <span className={styles.tabTitle}>创新点</span>
              <div className={teamStyles.cardWrapper}>
                实现论文工厂的自动化检测，能检测论文图像的生成和篡改。进行跨语言的一稿多发检测。用前沿的深度学习、自然语言处理和计算机视觉技术，持续优化算法，提升检测的准确性和效率。
              </div>
            </div>
            <div style={{ marginTop: '2em' }}>
              <span className={styles.tabTitle}>项目展示</span>
              <div className={teamStyles.imgWrapper}>
                <Image width={1147} src={Image1} />
                <Image width={1147} src={Image2} style={{ marginTop: '1em' }} />
              </div>
            </div>
          </div>
            </div>
          </TabPane>
          <TabPane tab={<span style={{ paddingLeft: '20px', marginRight:'20px' }}>项目成果</span>} key="2">
          <div>
            <div className={styles.tabs}>
              <div>
                <span className={styles.tabTitle}>指导老师</span>
                <div className={styles.cardWrapper}>
                  {renderCard(teacher, 'teacher')}
                </div>
              </div>
              <div style={{ marginTop: '1em' }}>
                <span className={styles.tabTitle}>团队成员</span>
                <div className={styles.cardWrapper}>
                  {renderCard(team, 'team')}
                </div>
              </div>
            </div>
          </div>
          </TabPane>
          <TabPane tab={<span style={{ paddingLeft: '20px', marginRight:'20px' }}>获奖情况</span>} key="3">
            <div>这里是获奖情况的内容...</div>
          </TabPane>
          </Tabs>
      </Card>
    </div>
  );
};

export default ProjectDetail;
